<template>
  <div id="product-brand-page"  :style="{paddingTop:(this.getSafeArea().top-4)+'px',height:(this.getWinSize().height-44-this.getSafeArea().top)+'px'}">
    <div class="page-title">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>品牌列表</span>
    </div>
    <div class="product-brand-box" :style="{
      height: (this.getWinSize().height-44-this.getSafeArea().top)+'px'
    }">
      <div v-if="brandList.length===0" style="padding-top: 150px; text-align: center; color: #AAAAAA">
        暂无品牌数据...
      </div>
      <div class="item" @click="choose(item)" v-for="(item,index) in brandList" :key="index">
        <div class="img-box" :style="{
          width: imageWidth+'px',
          height: imageWidth+'px'
        }">
          <img :style="{width:imageWidth+'px'}" :src="item.image" alt="">
        </div>
        <div class="brand-name" v-text="item.name"></div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductClassify',
  data:function () {
    return {
      imageWidth:100,
      brandList:[

      ]
    }
  },
  mounted () {
    this.imageWidth=Math.ceil((((this.getWinSize().width/3).toFixed(2)-0)*0.85).toFixed(2)-0)
    this.getList()
  },
  methods:{
    getList:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameMember+'Public/getBrandList',{},function (data) {
        $this.brandList=data
        $this.$forceUpdate()
      })
    },
    // 选择品牌
    choose: function (item) {
      this.$router.push({
        name:'SearchResult',
        query:{
          brandId:item.id
        }
      })
    }
  }
}
</script>

<style scoped>
  .product-brand-box{ overflow-x: hidden; overflow-y: auto;}
  .product-brand-box>.item{ width: 33%; float: left; text-align: center; margin-top: 5px; line-height: 30px;}
  .product-brand-box>.item>.img-box{ display: flex; align-items:center; float: left; margin-left: 5%}
  .product-brand-box>.item>.brand-name{ width: 100%; float: left; color: #000000}
</style>
